-

nella finestra Scelta del Modello o nella finestra Modello Personalizzato: occorre scegliere il Menu verticale per avere la navigazione fissa posta sulla colonna sinistra della Pagina o, in alternativa, Menu orizzontale per avere la navigazione fissa in orizzontale.

-

nella finestra Creazione della Mappa: occorre creare la struttura ad albero del Sito, inserendo opportunamente Livelli e Pagine. La struttura ad albero del Sito può prevedere più livelli di indentazione: le voci di primo livello corrispondono alle voci della navigazione fissa; le voci degli altri livelli corrispondono, invece, alle voci della navigazione locale.

Un fattore cruciale nel determinare la qualità della struttura di navigazione di un Sito è il "labeling", ovvero la definizione dei nomi dei pulsanti. I nomi scelti devono essere chiari e comprensibili: è meglio non tentare la strada dell'originalità e ricorrere piuttosto a espressioni diffuse e largamente utilizzate anche sugli altri Siti.

In WebSite X5 le label dei pulsanti che compongono i Menu corrispondono ai nomi dati a Livelli e Pagine durante la costruzione della Mappa del Sito (vedere, finestra Creazione della Mappa). Questi nomi vengono automaticamente ripresi anche per definire i titoli delle Pagine e i nomi dei file HTML corrispondenti alle Pagine stesse. Attraverso le apposite opzioni presenti nella finestra Proprietà Pagina è però possibile impostare un titolo e un nome del file diverso per ciascuna Pagina. In questo modo, è possibile diversificare i testi in modo da definire un adeguato labeling dei pulsanti del Menu e un sistema di titolazione opportuno non solo ai fini della comprensione del testo ma anche dell'indicizzazione da parte dei Motori di ricerca.

I test di usabilità sottolineano che i Menu non sono sempre la strada principale per accedere alle informazioni di un Sito: solitamente vengono impiegati dai Visitatori abituali o da quelli che hanno le idee molto chiare su cosa stanno cercando. Invece, la navigazione su Siti sconosciuti sfrutta soprattutto i link testuali presenti nel contenuto delle Pagine: da questo deriva l'importanza di questo tipo di link.

Sintetizzando, il testo di un collegamento deve essere conciso, esplicativo rispetto alla risorsa a cui porta e significativo anche se estrapolato dal contesto.

§Testi privi di significato

È importante che i link mantengano il loro significato anche quando vengono estratti dal contesto: espressioni come "clicca qui", "maggiori informazioni", "info", che risultano superflue anche quando inserite all'inizio di una frase, vanno evitate accuratamente. Una testo come "Clicca qui" non contiene alcuna informazione su ciò che verrà visualizzato seguendo il collegamento stesso: è scarsamente significativo sia per i Visitatori che per i Motori di ricerca, molti dei quali usano proprio i testi dei collegamenti per stimarne la rilevanza.

§Lunghezza dei link

È difficile stabilire a priori quanto deve essere lungo al massimo il testo di un collegamento. In linea generale il testo di un link deve essere lungo a sufficienza per esprimerne lo scopo: in altre parole, i testi dei collegamenti devono essere quanto più concisi possibile senza però che questo si traduca in perdita di significato.

§Le URL nei collegamenti

In alcuni casi può essere opportuno immettere come testo di un link direttamente una URL (per es, http://www.miosito.it). Bisogna considerare, però, che non sempre le URL sono significative e che possono essere molto lunghe. Se si verificano queste condizioni, è meglio modificare il testo del link in modo da renderlo più comprensibile.

§Testi alternativi per le immagini utilizzate come link

Quando un'immagine viene impiegata come link, il testo alternativo (ALT Text) ad essa associato assume la stessa funzione del testo di un collegamento testuale. Nel comporre il testo alternativo di queste immagini occorre ricordare che non è necessario specificare che si tratta di un link e che lo scopo del testo ALT non è quello di descrivere un'immagine ma di fornire un contenuto che ne svolga la stessa funzione. Così, per l'immagine di un pulsante su cui compare la scritta "Prodotti", come testo alternativo potrebbe essere inserito semplicemente "Prodotti".

Un altro fattore che incide sulla qualità della struttura di navigazione, oltre che sull'accessibilità dei collegamenti, è l'aspetto, ovvero come vengono resi graficamente.

§Sottolineatura

È fondamentale che il Visitatore possa riconoscere e individuare con sicurezza i link presenti in una Pagina: è un'esperienza frustrante cliccare su testi scambiati per collegamenti o spostare il mouse a caso attendendo che il puntatore si trasformi quando passa su un'area attiva o che appaia una Tooltip.

Di default i Browser impostano la sottolineatura su tutti i link: è possibile rimuoverla ma, nella maggior parte dei casi, è meglio non farlo. La sottolineatura dei collegamenti è, infatti, diventato uno standard abbastanza consolidato e non viene rispettata solo nelle voci dei menu principali. Inoltre, distinguere i link solo in base al colore è una tecnica contraria all'accessibilità: è difficile o impossibile, infatti, distinguere un link solo in base al colore se si usa un monitor in scala di grigi, se si legge la pagina stampata in bianco e nero o se si è daltonici.

§Colori

Tipicamente, i Browser rendono in blu i link non ancora visitati e in rosso quelli già visitati: rispettare questa convenzione permette di mantenere una significativa differenza fra i link già visitati e ancora da visitare (evitando l'errore di tornare a pagine già viste) e consente al Visitatore di muoversi con familiarità senza dover soffermarsi a ragionare sul funzionamento degli strumenti di navigazione che gli vengono messi a disposizione. È comunque possibile, e in casi specifici consigliabile, suggerire al Browser un set di colori diverso per i link: in questi casi è importante, però, rispettare il contrasto con il colore di sfondo della Pagina e mantenere una differenza significativa fra i colori scelti per ciascuno stato del collegamento.

§Effetti Hover e Focus

In molti siti, per motivi puramente estetici, vengono implementati effetti grazie al quale l'aspetto dei collegamenti (sia voci di menu che link nel testo) varia a seconda dello stato. L'utilizzo di questi effetti ha un risvolto positivo in termini di accessibilità in quanto aiuta il Visitatore a capire su quale collegamento è posto il focus.

WebSite X5 permette di personalizzare l'aspetto sia dei pulsanti che compongono i menu di navigazione sia dei link ipertestuali inseriti nelle Pagine:

§nella sezione Passo 4 - Impostazioni Avanzate vengono presentate le finestre per agire sulla grafica dei menu di navigazione (vedere, Stile del Menu Principale, Stile del Menu a Comparsa e Stile del Menu di Pagina) e, grazie a un editor integrato, è possibile ottenere pulsanti 3D con effetti di mouseover.

§sempre nella sezione Passo 4 - Impostazioni Avanzate, nella finestra Stili e Modelli, vengono presentate le opzioni per modificare l'aspetto dei link ipertestuali.

Nel determinare la qualità dell'esperienza d'uso di un Sito è importante che l'attivazione di un collegamento non sia vissuta come un salto nel buio: il Visitatore deve sapere subito cosa accadrà nel momento in cui cliccherà su un pulsante, un link o un'immagine.

§Collegamenti a risorse non HTML

I Visitatori dovrebbero essere avvisati quando un collegamento apre una risorsa diversa da una pagina HTML come, per esempio, file PDF, Word, PowerPoint, ecc. In questi casi, attualmente i Browser non danno alcuna informazione in merito e, quindi, viene lasciata all'Autore la scelta di indicare nel testo dei link il tipo di file, magari riportandolo in parentesi.

§Collegamenti con nuove finestre, finestre di Popup o altri siti Web

Il Visitatore dovrebbe essere avvertito se seguendo un link abbandona la finestra corrente per aprire una nuova finestra o una finestra di PopUp: tale cambio potrebbe, infatti, confonderlo rendendo inutilizzabile in pulsante per tornare indietro del Browser. Anche in questi casi, spetta a chi crea il Sito prevedere per i link un'indicazione del tipo "apre in una nuova finestra".

WebSite X5 consente di impostare collegamenti ipertestuali sia su porzioni di testo che su immagini, dando la possibilità di prevedere per ogni collegamento una descrizione.

Per definire il contenuto e l'aspetto della Tooltip è sufficiente accedere alla sezione Descrizione della finestra Collegamento.

Oltre ai collegamenti relativi ai menu di navigazione e a quelli inseriti direttamente nel contenuto delle Pagine, WebSite X5 crea e inserisce automaticamente dei collegamenti ad ancore interne che, durante la navigazione normale con il Browser, possono rimanere completamente invisibili.

Si tratta di skip link inseriti in punti strategici della Pagina per permettere di arrivare agevolmente ai contenuti, saltando i link di navigazione, o di andare ai link saltando i contenuti. Tali skip link non sono visualizzati dai Browser visuali: sono visibili, invece, quando si naviga disabilitando i fogli di stile.

In questa modalità di navigazione si vede anche che dopo i titoli del Sito, vengono presentate solo le voci di primo livello del menu di navigazione: seguono i contenuti principali della pagina, i sottomenu e le note e i link a piè di pagina. Questo tipo di organizzazione della Pagina è pensata per meglio mettere in evidenza i contenuti, ai fini di una miglior indicizzazione delle Pagine da parte dei Motori di ricerca e di una più agevole fruizione su dispositivi mobili.

Infine, partendo dalla struttura definita nella Creazione della Mappa, WebSite X5 crea e collega nel codice delle Pagine la Mappa linkata dell'intero sito: anche questa viene utilizzata dai Motori di ricerca per procedere all'indicizzazione. Tale Mappa può essere anche messa a disposizione dei Visitatori come ulteriore strumento di navigazione: il collegamento per richiamarla è automaticamente inserito nel menu visualizzato a fondo pagina (vedere, Stili e Modelli ) e/o può essere creato attraverso l'apposito azione presente nella finestra Collegamento.